<template>
  <div>
        <headerText :title="headerTitle" :smalltext="notice" :addto="true" :smalltextShow="false" @done="dropDown"></headerText>
        <!-- 下拉出现功能 -->
        <!-- <div class="drop_intop_panel"> -->
          <div class="dropDownpanel" v-if="dropintopShow">
            <span class="dropdown_triangle"></span>
            <router-link to="/information/addgroup"><i class="iconfont icon-qunliao"></i>添加圈聊</router-link>
            <router-link to="/information/addfriend"><i class="iconfont icon-tianjiahaoyou"></i>添加好友</router-link>
            <!-- <a @click="system(2)"><i class="iconfont icon-xitongxiaoxi"></i>系统消息</a> -->
          </div>
        <!-- </div> -->
        <div class="contents" @click="closeDrown">
            <div class="main_information">
                <div class="main_information_top"></div>
                <div class="main_informatino_bottom">
                    <div class="main_info_list">
                        <ul>
                            <li @click="handClick('circlenews')" :class="{'active':'circlenews'===targetFlag}">
                                <i class="iconfont icon-youquanlogozhuanhuan"></i>
                                <span>圈子消息</span>
                            </li>
                            <li @click="handClick('companynews')" :class="{'active':'companynews'===targetFlag}">
                                <i class="iconfont icon-qiye1"></i>
                                <span>企业消息</span>
                            </li>
                            <li @click="handClick('friendnews')" :class="{'active':'friendnews'===targetFlag}">
                                <i class="iconfont icon-xiaoxi5"></i>
                                <span>好友消息</span>
                            </li>
                            <li @click="handClick('systemnews')" :class="{'active':'systemnews'===targetFlag}">
                                <i class="iconfont icon-xiaoxi2"></i>
                                <span>系统消息</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 渲染信息列表 -->
            <!--圈子信息-->
            <div v-if="targetFlag==='circlenews'" style="margin-top: 2.9rem;height: 70%;position: absolute;width:100%;overflow-y: auto;">
                <div v-if="chatList == ''" class="contentEmpty" style="margin-top:0.6rem;">
                  <img src="../common/images/Disappointment.png" alt="">
                  <em>暂无圈子消息</em>
                </div>
                <div v-for="chat in chatList" :key="chat.id" @click="changeChat(chat)" v-else>
                    <div v-if="parseInt(chat.type) === 1 && parseInt(chat.g_type) === 1" class="info_lists_information clear" style="width: 100%;">
                      <div class="info_item_left fl" style="margin: 0.23rem 0 0.23rem 0.3rem;">
                        <img :src="chat.avatar" class="circle_img" alt="" v-if="parseInt(chat.type) === 0">
                        <img class="circle_img" src="../common/images/userAvatar.png" alt="" v-if="parseInt(chat.type) === 1">
                        <span class="circle_text_num" v-if="parseInt(chat.notReadNum) !== 0">{{chat.notReadNum}}</span>
                      </div>
                      <div class="info_item_desc fl" style="padding: 0.245rem;">
                          <h5>{{chat.group_name}}</h5> 
                          <p>{{chat.newInfo}}</p>
                      </div>
                      <div class="info_item_gray fr" style="margin-top: 0;padding-right: 0.2rem;">
                          <span>{{chat.last_chat_time | date}}</span>
                      </div>
                    </div>
                </div>
            </div>
            <!--企业信息-->
            <div v-if="targetFlag==='companynews'" style="margin-top: 2.9rem;height: 70%;position: absolute;width:100%;overflow-y: auto;">
                <div v-if="chatList == ''" class="contentEmpty" style="margin-top:0.6rem;">
                  <img src="../common/images/Disappointment.png" alt="">
                  <em>暂无企业消息</em>
                </div>
                <div v-else v-for="chat in chatList" :key="chat.id" @click="changeChat(chat)">
                  <div v-if="parseInt(chat.type) === 1 && parseInt(chat.g_type) === 2" class="info_lists_information clear" style="width: 100%;">
                    <div class="info_item_left fl" style="margin: 0.23rem 0 0.23rem 0.3rem;">
                        <img :src="chat.avatar" alt="" v-if="parseInt(chat.type) === 0">
                        <img src="../common/images/userAvatar.png" alt="" v-if="parseInt(chat.type) === 1">
                        <span class="text_num" v-if="parseInt(chat.notReadNum) !== 0">{{chat.notReadNum}}</span>
                    </div>
                    <div class="info_item_desc fl" style="padding: 0.245rem;">
                        <h5 v-if="parseInt(chat.type) === 0">{{chat.username}}</h5> 
                        <h5 v-if="parseInt(chat.type) === 1">{{chat.group_name}}</h5> 
                        <p>{{chat.group_name}}</p>
                    </div>
                    <div class="info_item_gray fr" style="margin-top: 0;padding-right: 0.2rem;">
                        <span>{{chat.last_chat_time | date}}</span>
                    </div>
                  </div>
                </div>
            </div>
            <!--好友信息-->
            <div v-if="targetFlag==='friendnews'" style="margin-top: 2.9rem;height: 70%;position: absolute;width:100%;overflow-y: auto;">
                <div v-if="chatList == ''" class="contentEmpty" style="margin-top:0.6rem;">
                  <img src="../common/images/Disappointment.png" alt="">
                  <em>暂无好友消息</em>
                </div>
                <div v-else v-for="chat in chatList" :key="chat.id" @click="changeChat(chat)" class="info_chat">
                  <div v-if="parseInt(chat.type) === 0" class="info_lists_information clear" style="width: 100%;">
                    <div class="info_item_left fl" style="margin: 0.23rem 0 0.23rem 0.3rem;">
                        <img :src="chat.avatar" alt="" v-if="parseInt(chat.type) === 0">
                        <img src="../common/images/userAvatar.png" alt="" v-if="parseInt(chat.type) === 1">
                        <span class="text_num" v-if="parseInt(chat.notReadNum) !== 0">{{chat.notReadNum}}</span>
                    </div>
                    <div class="info_item_desc fl" style="padding: 0.245rem;">
                        <h5>{{chat.username}}</h5>
                        <p>{{chat.newInfo}}</p>
                    </div>
                    <div class="info_item_gray fr" style="margin-top: 0;padding-right: 0.2rem;">
                        <span>{{chat.last_chat_time | date}}</span>
                    </div>
                  </div>
                </div>
            </div>
            <!--系统信息-->
            <div v-if="targetFlag==='systemnews'" style="margin-top: 2.9rem;height: 70%;position: absolute;width:100%;overflow-y: auto;">
                <!-- <div class="new_friend_list clear">
                  <div class="new_friend_list_left fl">
                       <img class="newfriend_img" src="../common/images/userAvatar.png" alt="">
                  </div> 
                  <div class="new_friend_list_desc fl"  @click="newFirend()">
                    <h5>新的朋友</h5> 
                    <p>新的朋友</p>
                     <p>发送日期:{{apply.time}}</p> 

                  </div> 
                 <div class="info_item_gray">
                      <span>{{ newTime | dateFormat("hh:mm")}}</span>
                  </div>
                  <div class="new_friend_list_desc fl" @click="newFirend()">
                    <h5>新的朋友</h5> 
                    <p>新的朋友</p>
                  </div>  

                </div> -->
                <div class="business_lists main_apply_list info_lists" @click="newFirend()">
                  <div class="business_left" style="margin-left: 0.3rem;vertical-align: middle;text-align: center;line-height: 0.66rem;border-radius: 50%;background-color: #FF5158;">
                       <!-- <img class="circle_img" src="../common/images/userAvatar.png" alt=""> -->
                       <i class="iconinfomation iconfont icon-tianjiahaoyou"></i>
                  </div> 
                  <div class="business_desc" style="width: 3.6rem; margin-left: 0;">
                    <h5>新的朋友</h5> 
                    <p>新的朋友</p>
                    <!-- <p>发送日期:{{apply.time}}</p> -->

                  </div> 
                  <div class="info_item_gray" style="margin: auto;font-size: 0.24rem;color: #999;">
                      <span>{{ newTime | date}}</span>
                  </div>
                </div>

                 <div class="business_lists main_apply_list info_lists" v-for="(apply,al) in systemList" :key="al" @click="infoDetail(apply)">
                  <div class="business_left" style="margin-left: 0.3rem;vertical-align: middle;text-align: center;line-height: 0.66rem;border-radius: 50%;background-color: #FF5158;">
                       <img :src="apply.avatar" alt="" v-if="apply.avatar">
                       <!-- <img class="circle_img" src="../common/images/userAvatar.png" alt=""> -->
                       <i class="iconinfomation iconfont icon-lingdang" v-else></i>
                       
                  </div> 
                  <div class="business_desc" style="width: 3.6rem; margin-left: 0;">
                    <h5>系统消息</h5> 
                    <p>{{apply.msg}}</p>
                    <!-- <p>发送日期:{{apply.time}}</p> -->

                  </div> 
                 <div class="info_item_gray" style="margin: auto;font-size: 0.24rem;color: #999;">
                      <span>{{ apply.time | date}}</span>
                  </div>
                </div>
            </div>
        </div>
        <!-- 系统消息详情展示 -->
        <ViewModal :modalState.sync="viewState">
            <sysMessageInfoModel :info="sysMessageInfo" @closedone="closePageModal"></sysMessageInfoModel>
        </ViewModal>
	  	  <so-footer></so-footer>
  </div>

</template>

<script>
import headerText from '../public/header-text.vue';
import soFooter from '../components/footer-bar';
import ViewModal from "../components/View";
import sysMessageInfoModel from '../public/sysMessageInfoModel';
import {
    ws,showChat,createApply, deleteChat, createChat, updateChat, friendList, deleteFriend, messageList, imageUrl,applyList,updateApply
  } from '../api/api';
import { post, fetch, patch, put } from '../common/js/http.js';
// import {ws,friendList} from '../api/api'
export default {
    data() {
      return {
        headerTitle:'消息 - 圈子消息',
        notice: '',
        targetFlag: 'circlenews',
        search: '',
        friendList: [], // 好友列表
        haveNotReadApply: true,
        chatList: [],  // 聊天列表
        filterFriendList:'',
        dropintopShow: false, //遮罩层
        applyList: [],
        target_id:'',
        msg:'测试信息',
        systemList:'',
        sysMessageInfo:'系统消息详情',
        viewState: false,//详情显示控制
        nowtime:'',
        newTime:'',
      }
    },
    components: {
      headerText,
      soFooter,
      ViewModal,
      sysMessageInfoModel,
    }, 
    
    methods: {
      infoDetail(info) {
        this.sysMessageInfo = info;
        this.viewState = true;

        // return false;
        // this.$router.push({ path: '/informationDetail', query: {id: id}});
      },
      // 关闭
      closePageModal() {
          this.viewState = false;
      },
      //点击管理好与申请列表
      newFirend(){
        this.$router.push({ path: '/information/applyList'});
      },
     // 切换消息列表
      handClick(flag) {
        this.targetFlag = flag;
        switch(flag){
            case 'circlenews':
              this.headerTitle = '消息 - 圈子消息';
            break;
            case 'companynews':
              this.headerTitle = '消息 - 企业消息';
            break;
            case 'friendnews':
              this.headerTitle = '消息 - 好友消息';
            break;
            case 'systemnews':
              this.headerTitle = '消息 - 系统消息';
            break;
        }
      },
      // 开启ws链接
      openConnect () {
        let token = window.localStorage.getItem('access_token')
        this.socket = new WebSocket(`${ws}?token=${token}`)
        // this.onMessage
        this.socket.onopen = this.onConnect
        this.socket.onmessage = this.onMessage
        this.socket.onclose = this.onClose
        this.socket.onerror = this.onError
      },
      onError () {
        this.$confirm('聊天服务器连接失败', '提示', {
          confirmButtonText: '重新连接',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          this.openConnect()
        }).catch(() => {
          localStorage.setItem('token', '')
          this.$router.push('/')
        })
      },
      // 链接成功事件
      onConnect (ws) {
        // this.$message.success(`已成功连接到聊天服务器`)
        this.isConnect = true
      },
      // 断开连接触发函数
      onClose () {
        this.isConnect = false
      },
      // 聊天消息接受处理函数
      handleMsg (data) {
        if ('chat' in data) {
          console.log(1515);
          const chat = data.chat;
          chat.notReadNum += 1;
          chat.msgList.push(data.msg);
          this.chatList.unshift(chat);
        } else {
          let chat = this.chatList.find(element => parseInt(element.chat_id) === parseInt(data.msg.chat_id))
          chat.msgList.push(data.msg);
          chat.last_chat_time = data.msg.time;
          chat.notReadNum += 1;
          let _length = chat.msgList.length;
          chat.newInfo = chat.msgList[(_length-1)]['msg'];
          console.log('321',chat.msgList[(_length-1)]['msg']);
        }
      },
      //初始化信息列表
      handleMsgNew(data){
        console.log('初始化', data);
        let chat_l = '';
        for ( var i = 0; i <data.length; i++){
          let _length = data[i]['msgList'].length
          if(data[i]['msgList'] == ''){
            data[i].newInfo = '';
          }else{
            data[i].newInfo = data[i]['msgList'][(_length-1)]['msg'];
          }
        }
        this.chatList = data;
        
        // data.forEach(item => {
        //   item.newInfo = 777
        //   item.reject = that.applylist.reject;
        //   console.log('item.check', item.check)
        // });
        // let chat = this.chatList.find(element => parseInt(element.chat_id) === parseInt(data.msg.chat_id))
        // let _length = chat.msgList.length
        // chat.newInfo = chat.msgList[(_length-1)]['msg'];
      },
      //系统消息初始化
      systemMsgNew(data){

        this.systemList = data;
      },
      // 接受消息事件
      onMessage (ws) {
        try {
            let data = JSON.parse(ws.data);
            console.log('接受消息事件',ws);
             console.log(11,data);
          switch (data.type) {
          case 'chatList': // 聊天列表
            this.handleMsgNew(data.chatList);
            this.systemMsgNew(data.systemList);
            break
          case 'msg':
            this.systemList.append(data.msg);
            this.handleMsg(data)
            break
          case 'forbidden':  // token不正确
            this.handleLoginOut()
            break
          case 'repeat':  // 被踢
            this.visible.reConnect = false
            this.socket.close()
            localStorage.setItem('token', '')
            this.$alert('你的账号已在别处登陆', '提示', {
              confirmButtonText: '确定',
              callback: () => {
                this.$router.push('/')
              }
            })
            break
          case 'newApply':   // 有新的好友申请
            this.haveNotReadApply = true
            break
          case 'applySucc':  // 好友申请被同意
            this.handleFriendList()
            this.$message.success('"' + data.friend.username + '"已经同意你的好友申请')
            break
          case 'newGroup': // 接受新群组
            this.chatList.unshift(data.group)
            break
          case 'repeatConnect': // 重复连接
            this.socket.close()
            this.visible.repeatConnect = true
            this.visible.reConnect = false
            break
          case 'goOnline':  // 上线消息
            let chat = this.chatList.find(element => parseInt(element.chat_id) === parseInt(data.chatId))
            chat.online = true
            break
          case 'goOffLine':  // 下线消息
            chat = this.chatList.find(element => parseInt(element.chat_id) === parseInt(data.chatId))
            chat.online = false
            break
          case 'quitGroup':   // 退出群组消息
            const chatId = data.chatId
            const userId = data.userId
            chat = this.chatList.find((element) => parseInt(element.chat_id) === parseInt(chatId))
            const index = chat.userList.findIndex(element => parseInt(element.id) === parseInt(userId))
            const user = chat.userList.splice(index, 1)
            this.$message.success(`<${user.username}>退出了群组<${chat.group_name}>`)
            break
        }
        } catch (err) {
            console.log(JSON.stringify(err));
        }
      },
            // 切换当前聊天对象
      changeChat (chat) {
        this.currentChat = chat
        // console.log(chat);
        // 消息设置为已读
        if (chat.notReadNum > 0) {
          updateChat({id: chat.chat_id}).then(res => {
            if (parseInt(res.status) === 1) {
              chat.notReadNum = 0
              this.$router.push({
                path: '/chat',
                query: {
                  chat: chat
                }
              });
            }
          })
        }else{
          this.$router.push({
            path: '/chat',
            query: {
              chat: chat
            }
          });
        }
      },
      //下拉添加圈聊、添加好友
      dropDown() {
        this.dropintopShow = !this.dropintopShow;
      },
      // 点击空白，下拉框收起
      closeDrown() {
        this.dropintopShow = false;
      },
       //好友申请列表
      handleApplyList () {
        let access_token = window.localStorage.getItem('access_token');

        applyList().then(res => {
          console.log('好友申请列表',res);
          if(res.status == 1) {
            this.newTime = res.applyList[0].created_at;
            console.log('最新时间',this.newTime);
            // this.applyList = res.applyList;
            // // this.chatList = res.data;
            //   for (let x in this.applyList) {
            //     if (parseInt(this.applyList[x].is_read) === 0) {
            //       this.$emit('update:notReadApply', true)
            //       break
            //     }
            //   }            
            }
        })
      },
      // system (t,message='系统消息') {
      //   //首先第一步添加好友 创建通道
      //   let access_token = window.localStorage.getItem('access_token');
      //   let chat_id = window.localStorage.getItem('chat_id');


        //发送demo
        // showChat({chat_id:chat_id}).then(res =>{
        //     console.log('查看聊天对象:',res);          
        // })

        /*
           首页判断当前用户是否有聊天对象
           如果存在聊天对象则已经是老用户
           则是新用户需要帮用户创建一个聊天对象
         */
        // if(chat_id){
        //     showChat().then(res =>{
        //       console.log('查看聊天对象:',res);
        //       let chat = res.chat;
        //       //这里需要加一个查看当前聊天对象id
        //       let msg = {
        //                   chat_id: chat_id,
        //                   msg: message,
        //                   type: 'msg',
        //                   msg_type: 0,
        //                   from_id: chat.target_id,
        //                   to_id: chat.user_id,
        //                   is_read: 1,
        //                   avatar: ''
        //                 }

        //        this.send(msg).then(() => {
        //             this.systemList.push(msg);
        //             console.log('第三步发送成功');
        //         })            
        //     })
            

        // }else{

        //     createApply({targetId: 0,reason:'系统消息',access_token: access_token,system:1}).then(res => {
        //           //需要返回一个
        //           console.log('第一步添加系统为好友',res);
        //           if (parseInt(res.status) === 1) {
        //             //创建聊天对象
        //             createChat({targetId:0}).then( res => {
        //                 console.log('第二步创建系统为聊天对象');
        //                 let chat = res.chat;
        //                 let chat_id = res.chat_id;
        //                 let msg = {
        //                     chat_id: chat_id,
        //                     msg: message,
        //                     type: 'msg',
        //                     msg_type: 0,
        //                     from_id: chat.target_id,
        //                     to_id: chat.user_id,
        //                     is_read: 1,
        //                     avatar: ''
        //                 }
        //                 window.localStorage.setItem('chat_id', chat_id);
        //                  this.send(msg).then(() => {
        //                       this.systemList.push(msg);
        //                       console.log('第三步发送成功');
        //                   })
        //             })

        //           }
        //       })


        // }
        
        

         // let msg = {
         //              chat_id: 25,
         //              msg: '新的测试系统消息',
         //              type: 'msg',
         //              msg_type: 0,
         //              from_id: 0,
         //              to_id: 7,
         //              is_read: 1,
         //              avatar: ''
         //          }
                    
         //           this.send(msg).then(() => {
         //            this.systemList.push(msg);
         //                console.log('第三步发送成功');
         //            })
        
       


        // console.log(t);
        // if(t == 1){//新的好友第一次发送信息
        //   let msg = {
        //     chat_id: 0,
        //     msg: '我通过了你的朋友验证请求，现在我们可以开始聊天了',
        //     type: 'msg',
        //     msg_type: 0,
        //     from_id: this.target_id,
        //     to_id: 0,
        //     is_read: 1,
        //     avatar: this.info.userhead
        //   }
        //   console.log('333',msg);
        //   this.send(msg).then(() => {
        //     // this.sendList.set()
        //     this.currentChat.msgList.push(msg);
        //     this.currentChat.last_chat_time = getNowFormatDate();
        //     this.msg = '';
        //     if (this.currentChat.notReadNum > 0) {
        //       updateChat({id: this.currentChat.chat_id}).then(res => {
        //         if (parseInt(res.status) === 1) {
        //           this.currentChat.notReadNum = 0;
        //         }
        //       })
        //     }
        //   })
        // }else{
        //   if (this.msg === '') {
        //     this.$message.error('不能发送空消息!');
        //     return false;
        //   }
        //   let msg = {
        //     chat_id: 2,
        //     msg: this.msg,
        //     type: 'msg',
        //     msg_type: 0,
        //     from_id: 0,
        //     to_id: 2,
        //     is_read: 1,
        //     avatar: ''
        //   }
        //   console.log('msg', msg);
        //   this.send(msg).then(res => {
        //       console.log('888',res);

        //     // this.sendList.set()
        //     // this.currentChat.msgList.push(msg);
        //     // this.currentChat.last_chat_time = getNowFormatDate();
        //     // this.msg = '';
        //     // if (this.currentChat.notReadNum > 0) {
        //     //   updateChat({id: this.currentChat.chat_id}).then(res => {
        //     //     if (parseInt(res.status) === 1) {
        //     //       this.currentChat.notReadNum = 0;
        //     //     }
        //     //   })
        //     // }
        //   })
        // }

        // console.log('1919',msg);
        // this.send(msg).then(() => {
        //   // this.sendList.set()
        //   this.currentChat.msgList.push(msg);
        //   this.currentChat.last_chat_time = getNowFormatDate();
        //   this.msg = '';
        //   if (this.currentChat.notReadNum > 0) {
        //     updateChat({id: this.currentChat.chat_id}).then(res => {
        //       if (parseInt(res.status) === 1) {
        //         this.currentChat.notReadNum = 0;
        //       }
        //     })
        //   }
        // })
      // },
       // webSocket发送消息
      send (msg) {
        return new Promise((resolve, reject) => {
          if (this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(JSON.stringify(msg))
            resolve()
          } else {
            this.isConnect = false;
            reject(new Error())
          }
        })
      },
      // 同意好友申请
      handleAgree (apply) {
        updateApply({status: 1, id: apply.id}).then(res => {
          if (parseInt(res.status) === 1) {
            this.$emit('handleFriendList');
            apply.status = 1
            //创建一个聊天对象
            createChat({targetId: apply.sponsor_id}).then(respose => {
            if (parseInt(respose.status) === 1) {
              respose.chat.user_id = apply.target_id;
              // chat = respose.chat
              // 切换聊天对象
              this.$router.push({
                path: '/chat',
                query: {
                  chat: respose.chat,
                  type: 'new'
                }
              });
              // this.chatList.unshift(chat)
              // this.switchInterface('chat')  // 切换到聊天界面
              // this.changeChat(chat)    // 将当前聊天对象切换成该聊天
            }
          })
          }
        })
      },
      // 拒绝好友申请
      handleReject (apply) {
        updateApply({status: 2, id: apply.id}).then(res => {
          if (parseInt(res.status) === 1) {
            apply.status = 2
          }
        })
      },

    },
     computed: {
      // 好友申请搜索
      filterApplyList () {
        return this.applyList;
      },
      show () {
        this.handleApplyList();
        return this.visible;
      }
    },
    mounted () {
      this.openConnect();
      this.handleApplyList();
      this.$store.commit('setPage', 2);//设置需要预请求的参数
      let access_token = window.localStorage.getItem('access_token');
      this.$fetch(this.$path+'/index.php/api/IM/userid',{access_token:access_token}).then((response) => {
          // console.log('返回',response);
          this.target_id = response;

      })
      var myDate = new Date();
      this.nowtime = myDate.toLocaleDateString().replace('/','-').replace('/','-');
      // this.nowtime = myDate.getFullYear() + '-' myDate.getMonth() + '-' + myDate.getDate();
      console.log('nowtime',this.nowtime);
        // console.log('当前年月日',myDate.toLocaleDateString().replace('/','-').replace('/','-'));

      if (this.$route.query.targetFlag) {
            this.targetFlag = this.$route.query.targetFlag? this.$route.query.targetFlag : 'circlenews';
            // setTimeout(() => {
            //     that.handClick(that.targetFlag)
            // }, 200);
        }
    },
    filters:{
      date(time){
          let oldDate = new Date(time)
          let newDate = new Date()
          var dayNum = "";
          var getTime = (newDate.getTime() - oldDate.getTime())/1000;
          let year   = oldDate.getFullYear();
          let month  = oldDate.getMonth()+1;
          let day    = oldDate.getDate();
          let hour   = oldDate.getHours(); 
          let minute = oldDate.getMinutes(); 
          let second = oldDate.getSeconds(); 


          if(getTime < 60*5){
              dayNum = "刚刚";
          }else if(getTime >= 60*5 && getTime < 60*60){
              // dayNum = parseInt(getTime / 60) + "分钟前";
              dayNum = hour+":"+minute;
          }else if(getTime >= 3600 && getTime < 3600*24){
              // dayNum = parseInt(getTime / 3600) + "小时前";
              dayNum = hour+":"+minute;
          }else if(getTime >= 3600 * 24 && getTime < 3600 * 24 * 30){
              if(parseInt(getTime / 3600 / 24 )  == 1){
                dayNum = "昨天" +" "+ hour+":"+minute;
              }else if(parseInt(getTime / 3600 / 24 )  == 2){
                dayNum = '前天' +" "+ hour+":"+minute;
              }else{ 
                // dayNum = month+"-"+day+" "+hour+":"+minute;
                dayNum = year+"-"+month+"-"+day
              }
              
          }else if(getTime >= 3600 * 24 * 30 && getTime < 3600 * 24 * 30 * 12){
              dayNum = year+"-"+month+"-"+day
          }else if(time >= 3600 * 24 * 30 * 12){
              dayNum = year+"-"+month+"-"+day  
          }

          
          // return dayNum+" "+month+"-"+day+" "+hour+":"+minute;
          // return dayNum+" "+year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
          return dayNum;
      }
  }
    
  }

</script>
<style >
/* 内容 */
.contents {
  height: 100%;
  background-color: rgb(255, 255, 255);
  width: 100%;
  position: absolute;
}
/* 顶部浮层 */
.main_information {
    height: 2.2rem;
    position: absolute;
    width: 100%;
    overflow: hidden;
    z-index: 10;
    top: 0.88rem;
}
.main_information .main_information_top {
    width: 100%;
    height: 0.88rem;
    padding: 0;
    background-color: #E50834;
    position: absolute;
    top: 0;
    left: 0;
}
.main_information .main_informatino_bottom {
    position: absolute;
    height: 2rem;
    width: 7.1rem;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    background-color: #fff;
    border-radius: 0.08rem;
    box-shadow: 0 2px 3px -1px #f3ecec;
    z-index: 10;
}
.main_informatino_bottom .main_info_list ul{
    margin-top: 0.32rem;
    display: flex;
    justify-content: space-between;
}
.main_informatino_bottom .main_info_list ul>li {
    flex: 1;
    text-align: center;
    width: 1.775rem;
}
.main_info_list ul>li .icon-youquanlogozhuanhuan {
    width: 0.84rem;
    height: 0.84rem;
    font-size: 0.5rem;
    display: block;
    margin: 0 auto;
    background-color: #FF5158;
    border-radius: 18px;
    color: #fff;
    line-height: 0.84rem;
    text-align: center;
    margin-bottom: 0.2rem;
}
.main_info_list ul>li .icon-qiye1 {
    width: 0.84rem;
    height: 0.84rem;
    font-size: 0.5rem;
    display: block;
    margin: 0 auto;
    background-color: #42D0FF;
    border-radius: 18px;
    color: #fff;
    line-height: 0.84rem;
    text-align: center;
    margin-bottom: 0.2rem;
}
.main_info_list ul>li .icon-xiaoxi5 {
    width: 0.84rem;
    height: 0.84rem;
    font-size: 0.5rem;
    display: block;
    margin: 0 auto;
    background-color: #9BDF38;
    border-radius: 18px;
    color: #fff;
    line-height: 0.84rem;
    text-align: center;
    margin-bottom: 0.2rem;
}
.main_info_list ul>li .icon-xiaoxi2 {
    width: 0.84rem;
    height: 0.84rem;
    font-size: 0.5rem;
    display: block;
    margin: 0 auto;
    background-color: #FFC63D;
    border-radius: 18px;
    color: #fff;
    line-height: 0.84rem;
    text-align: center;
    margin-bottom: 0.2rem;
}
.main_info_list ul>li span {
    font-size: 0.26rem;
    color: #333;
    font-weight: 400;
    display: block;
}

/* 信息列表--圈子消息 */
.info_lists_information {
    /* display: flex;
    justify-content: space-between;
    table-layout: fixed; */
    height: 1.48rem;
    line-height: 1.48rem;
    border-bottom: 1px solid #d8d8d8;
}
.info_chat:last-child {
  border-bottom: none;
}
.info_lists_information .info_item_left {
    width: 1rem;
    height: 1rem;
    margin: auto;
    position: relative;
}
.info_item_left img {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    vertical-align: super;
}
.info_lists_information .info_item_desc {
    margin: auto;
    width: 4.2rem;
    text-align: left;
}
.info_item_desc h5 {
    font-size: 0.28rem;
    color: #333;
    line-height: 0.48rem;
    height: 0.48rem;
    width: 4.4rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
.info_item_desc p {
    font-size: 0.24rem;
    color: #666;
    padding-bottom: 0;
    background-color: transparent;
    width: 4.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    height: 0.48rem;
    line-height: 0.48rem;
}
.info_lists_information .info_item_gray {
    margin: auto;
    margin-top: -0.3rem;
    font-size: 0.24rem;
    color: #999;
}

/* 圈子消息图片为方 */
.circle_img {
  /* border-radius: 0% !important; */
}
/* 新的朋友默认icon */
.business_left .iconinfomation {
  font-size: 0.5rem;
  color: #fff;
}
.circle_text_num {
    /* min-width: 0.2rem;
    height: 0.2rem;
    background-color: #e50838;
    position: absolute;
    right: -0.1rem;
    top: -0.1rem;
    border-radius: 50%; */
    min-width: 0.4rem;
    height: 0.4rem;
    background-color: #e50838;
    font-size: 0.18rem;
    position: absolute;
    right: -0.2rem;
    top: -0.1rem;
    color: #fff;
    line-height: 0.34rem;
    padding: 0.04rem;
    border-radius: 50%;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}
.text_num {
    min-width: 0.4rem;
    height: 0.4rem;
    background-color: #e50838;
    font-size: 0.18rem;
    position: absolute;
    right: -0.2rem;
    top: -0.1rem;
    color: #fff;
    line-height: 0.34rem;
    padding: 0.04rem;
    border-radius: 50%;
    transform: scale(0.8);
}

/* 下拉框 */
.drop_intop_panel {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 16;
}
.dropDownpanel {
    width: auto;
    height: auto;
    background-color: #fff;
    position: absolute;
    top: 0.88rem;
    right: 0.1rem;
    z-index: 15;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(211, 125, 125, 0.34);
}
.dropDownpanel .dropdown_triangle {
    width: 0;
    height: 0;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #fff;
    position: absolute;
    right: 0.13rem;
    top: -0.14rem;
    z-index: 15;
}
.dropDownpanel a {
    font-size: 0.3rem;
    color: #333;
    display: block;
    line-height: 0.92rem;
    height: 0.92rem;
    text-align: left;
    padding: 0 0.2rem;
}
.dropDownpanel a .icon-icon,
.dropDownpanel a .icon-qunliao,
.dropDownpanel a .icon-tianjiahaoyou,
.dropDownpanel a .icon-xitongxiaoxi {
  font-size: 0.36rem;
  margin-right: 0.12rem;
  color: #333;
}

/* 系统消息 */
.main_apply_list:last-child {
  border-bottom: 1px solid #d8d8d8;
}

/* 新的朋友 */
.new_friend_list {
    width: 100%;
    height: 1.48rem;
    line-height: 1.48rem;
    border-bottom: 1px solid #d8d8d8;
}
.new_friend_list .new_friend_list_left {
    width: 1rem;
    height: 1rem;
    margin: 0.23rem;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 0.1rem;
}
.new_friend_list .new_friend_list_left img {
    width: 1rem;
    height: 1rem;
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
    vertical-align: super;
}
.new_friend_list .new_friend_list_desc {
    margin: 0.24rem;
    text-align: left;
}
.new_friend_list .new_friend_list_desc h5 {
    font-size: 0.28rem;
    color: #333;
    line-height: 0.48rem;
    height: 0.48rem;
    width: 4.4rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
.new_friend_list .new_friend_list_desc p {
    font-size: 0.24rem;
    color: #666;
    padding-bottom: 0;
    background-color: transparent;
    width: 4.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    height: 0.48rem;
    line-height: 0.48rem;
}
</style>

